<template>
  <div>
    <div class="layoutSider" v-if="aggregateMenu && aggregateMenu.length > 0">
      <a-layout-sider v-model="collapsed" class="menuLeft" theme="light" :trigger="null" collapsible style="height:100%">
        <div>
          <a-menu
            :selectedKeys="[$route.fullPath]"
            :openKeys="openKeys"
            :inline-collapsed="collapsed"
            mode="inline"
            @openChange="onOpenChange"
            @click="menuClick"
          >
            <template v-for="item in aggregateMenu">
              <a-menu-item v-if="!item.children" :key="item.path">   
                <a-icon v-if="collapsed" :type="item.meta.icon ? item.meta.icon : 'menu'" />
                <a-icon v-if="!collapsed && item.meta.icon" :type="item.meta.icon" />
                <span> {{item.meta.title}}</span>
              </a-menu-item>
              <sub-menu v-else :key="item.path" :menu-info="item" :collapsed="collapsed" />
            </template>
          </a-menu>
        </div>
        <div class="collapsedIcon">
          <a-divider>
            <a-icon  
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
              style="font-size: 18px !important"
            />
          </a-divider>
        </div>
      </a-layout-sider>
    </div>
  </div>
</template>
<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import { mapActions, mapGetters, mapState } from 'vuex'
import { getAction } from '@/api/manage'
import subMenu from './subMenu.vue'
import JEllipsis from '../jeecg/JEllipsis.vue'
export default {
  name: 'leftTab',
  components: {
    RouteView,
    subMenu,
    JEllipsis,
  },
  mixins: [mixinDevice],
  // props: ['htmlStr'],
  data() {
    return {
      isShowMenu: false,
      collapsed: false,
      mode: 'inline',
      tabPosition: 'left',
      mainInfoHeight: '100%',
      openKeys: [], //展开的菜单项
      selectedKeys: [], //选中菜单项
      rootSubmenuKeys: [],
      title: '',
      componentName: '',
      aggregateMenu: [],
      menuDataOld: [],
      routesInfo: [],
      list: '/sys/permission/getSystemSubmenuByName',
    }
  },
  computed: {
    ...mapState({
      //路由权限信息
      routers: (state) => state.permission.routers,
    }),
  },
  created() {
    let currentRoute = Object.assign({}, this.$route)
    // const matched = currentRoute.matched
    // this.openKeys = matched && matched.length > 0 ? [matched[matched.length - 1].path] : []
    this.getAggregateMenu(currentRoute)
    // this.getMenuList()
  },

  mounted() {
    this.mainInfoHeight = window.innerHeight - 285 + 'px'
  },
  methods: {
    //获取菜单数据
    // getMenuData() {
    //   this.selectedKeys = []
    //   this.routesInfo = this.$route.matched.concat()

    //   // 0.首页,1.财务管理，2.订单资金管理，3.订单资金列表(当前路由)
    //   // 0.首页,1.系统管理，2.基础数据，3.财务配置 4.店铺映射负责人 (当前路由)
    //   let menuData = this.permissionMenuList
    //   for (var i = 1; i < this.routesInfo.length - 1; i++) {
    //     menuData =
    //       menuData.length > 0 ? menuData.filter((child) => child.path === this.routesInfo[i].path)[0].children : []
    //   }
    //   this.menuData = menuData
    // },
    getAggregateMenu(newRoute) {
      if (newRoute.matched && (newRoute.matched.length == 3 || newRoute.matched.length > 3)) {
        const aggregate = newRoute.matched.filter((s) => s.meta.componentName === 'LeftTabLayout' || s.meta.componentName === 'K3cloudLayout')
        if (aggregate && aggregate.length > 0) {
          //如果当前路由不是聚合路由，且隐藏
          // if (newRoute.path !== aggregate[0].path && newRoute.meta.hidden) {
          if (newRoute.meta.componentName !== 'LeftTabLayout' && newRoute.meta.hidden) {
            this.aggregateMenu = []
          } else {
            //过滤聚合路由下的子菜单
            const aggregateMenu = aggregate[0].meta.aggregate
            this.aggregateMenu = aggregateMenu.aggregateMenu.filter((s) => !s.hidden)
            this.handleData(this.aggregateMenu)
          }
        } else {
          this.aggregateMenu = []
        }
      } else {
        this.aggregateMenu = []
      }
    },
    handleData(result) {
      const that = this
      function loop(list, keys = []) {
        for (let item of list) {
          if (item.path === that.$route.path) {
            return [...keys]
          } else if (item.children && item.children.length) {
            let tempResult = loop(item.children, [...keys, item.path])
            if (tempResult) {
              return tempResult
            }
          }
        }
        return false
      }
      this.openKeys = loop(result)
    },
    onOpenChange(openKeys) {
      if (openKeys.length !== 0) {
        // this.openKeys = [openKeys[1]]
        this.openKeys = openKeys
      } else {
        this.openKeys = ['']
      }
    },

    menuClick({ item, key, keyPath }) {
      // 菜单配置中不设置缓存，点击当前菜单报错处理
      this.$router.push({
        path: key,
      }, () => {})
    },

    // onOpenChangeS(openKeys) {
    //   const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1)
    //   if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    //     this.openKeys = openKeys
    //   } else {
    //     this.openKeys = latestOpenKey ? [latestOpenKey] : []
    //   }
    // },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
  },
  watch: {
    $route: function (newRoute) {
      if (newRoute) {
        this.getAggregateMenu(newRoute)
      }
    },
  },
}
</script>
<style scoped>
.layoutSider {
  min-height: 550px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  height: 100%;
}
.account-settings-info-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 12px;
}
.ant-layout-content {
  padding: 0 !important;
}
/deep/.ant-divider-inner-text {
  padding: 0 0px;
  color: rgba(0, 0, 0, 0.5);
}
/deep/.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
  background-color: #e6f7ff !important;
}
/deep/.ant-layout-sider-children{
  height: 100%;
  position: relative;
}
.collapsedIcon{
  width: 100%;
 margin-top: 50px;
}
</style>
